<template>
  <div>
    <div>
      <!-- Container 布局容器
        <el-container>：外层容器
        <el-header>：顶栏容器。
      -->
      <el-container>
        <el-header>
           <!-- Layout 布局
            通过基础的 24 分栏，迅速简便地创建布局。
              通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
           -->
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">查询药品</el-button>
            </el-col>
            <el-col :span="6">
              <!-- 新增药品触碰点击事件 -->
              <el-button type="primary" @click="dialogVisible = true">新增药品</el-button>
            </el-col>
            <!-- 当dialogVisible = true，弹出窗体显示内容 -->
            <el-dialog :visible.sync="dialogVisible">
              <span>新增药品信息</span>
              <el-form :model="addDrugForm">
                <el-form-item label="药品编码" >
                  <el-input v-model="addDrugForm.drugsCode"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="addDrugForm">
                <el-form-item label="药品名称" >
                  <el-input v-model="addDrugForm.drugsName"></el-input>
                </el-form-item>
              </el-form>

              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addNewDrug()">确 定</el-button>
              </span>
            </el-dialog>

            <el-col :span="6">
              <el-button type="primary">导入药品</el-button>
            </el-col>
          </el-row>
        </el-header>
      </el-container>
    </div>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">备选项</el-checkbox>
          </el-col>

          <el-table :data="msg" style="width: 100%">
            <el-col :span="5">
            <el-table-column label="药品编码" width="180">
              <template slot-scope="scope">
                <i class="el-icon-date"></i>
                <span style="margin-left: 10px">{{ scope.row.drugsCode }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="药品名称" width="180">
              <template slot-scope="scope">
                <i class="el-icon-document-add"></i>
                <span style="margin-left: 10px">{{ scope.row.drugsName }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="药品规格" width="180">
              <template slot-scope="scope">
                <i class="el-icon-edit"></i>
                <span style="margin-left: 10px">{{ scope.row.drugsFormat }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="药品助记码" width="180">
              <template slot-scope="scope">
                <i class="el-icon-edit"></i>
                <span style="margin-left: 10px">{{ scope.row.mnemonicCode }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="操作">
              <template slot-scope="scope"><i class="el-icon-edit-outline"></i>
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
            </el-col>
          </el-table>
        </el-row>
      </el-header>
    </el-container>
  </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: '',
        checked: true,
        dialogVisible:false,
        addDrugForm:{
          drugsCode:'',//药品编码
          drugsName:'',//药品名称
          mnemonicCode:'',//拼音助记码
          drugsFormat:'',//药品规格
          drugsUnit:'',//药品单位
          drugsPrice:'',//药品单价
          drugsDosageID:'',//药品剂型
          drugsTypeID:''//药品类型
        },
        msg:[
          {
            drugsCode:'110',//药品编码
            drugsName:'蚂蚁大力丸',//药品名称
            drugsFormat:'0.5/30g/盒',//药品规格
            drugsUnit:'盒',//包装单位
          }
        ]
      }
    },
    methods: {
      /* 增加药品 */
      addNewDrug(){
        this.$axios.post("/drugsmage/addNewDrug",this.addDrugForm).then(response =>{
          console.log(response);
        });
        alert(this.addDrugForm.drugsName)
      }
    }
  }
  </script>

<style>
</style>
